<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body,html{
			width:100%;
			height: 100%;
			overflow: hidden;
		}
		body{
			background: #000;
		}	
		#c1{
			background: #000;
		}
	</style>
	<script>
		function rnd(m,n){
			return Math.floor(Math.random()*(n-m)+m)
		}
		document.addEventListener('DOMContentLoaded',function(){
			var oC=document.getElementById('c1');
			var gd=oC.getContext('2d');
			var winH=document.documentElement.clientHeight;
			var winW=document.documentElement.clientWidth;

			oC.width=winW;
			oC.height=winH;

			var oldArr=[];
			var LEN=10;
			var aPoint=[];
			var N=5;
			for(var i=0;i<N;i++){
				aPoint[i]={
					x:rnd(0,oC.width),
					y:rnd(0,oC.height),
					iSpeedX:rnd(-10,10),
					iSpeedY:rnd(-10,10)
				}
			}
			//随机生成的5个点用fillRect矩形填色,同时回到中心点
			function drawPoint(p){
				var pw=1;
				var ph=1;
				gd.fillStyle='#fff';
				gd.fillRect(p.x-pw/2,p.y-ph/2,pw,ph)
			}

			setInterval(function(){
				gd.clearRect(0,0,oC.width,oC.height);
				//定时器里面循环随机生成5个点,控制范围
				for(var i=0;i<aPoint.length;i++){

					aPoint[i].x+=aPoint[i].iSpeedX;
					aPoint[i].y+=aPoint[i].iSpeedY;
					if(aPoint[i].x<0){
						aPoint[i].x=0;
						aPoint[i].iSpeedX*=-1;
					}
					if(aPoint[i].y<0){
						aPoint[i].y=0;
						aPoint[i].iSpeedY*=-1;
					}
					if(aPoint[i].x>oC.width){
						aPoint[i].x=oC.width;
						aPoint[i].iSpeedX*=-1;
					}
					if(aPoint[i].y>oC.height){
						aPoint[i].y=oC.height;
						aPoint[i].iSpeedY*=-1;
					}

					drawPoint(aPoint[i]);
				}
				//对这5个点描边
				gd.beginPath();
				gd.moveTo(aPoint[0].x,aPoint[0].y);
				
				for(var i=1;i<aPoint.length;i++){
					gd.lineTo(aPoint[i].x,aPoint[i].y);
				}
				gd.closePath();
				gd.strokeStyle='#fff';
				gd.stroke();
				//吧5个点的坐标放进数组
				var arr=[];
				for(var i=0;i<aPoint.length;i++){
					arr[i]={
						x:aPoint[i].x,
						y:aPoint[i].y
					};
				}
				//将每次5个点坐标的数组放进oldArr;最久的放在第一位，大于LEN，将最久的那个删除
				oldArr.push(arr);
				if(oldArr.length>LEN){
					oldArr.shift();
				}
				//console.log(oldArr);
				gd.beginPath();
				for(var i=0;i<oldArr.length;i++){
					gd.strokeStyle='#fff';
					gd.moveTo(oldArr[i][0].x,oldArr[i][0].y);

					for(var j=0;j<oldArr[i].length;j++){
						gd.lineTo(oldArr[i][j].x,oldArr[i][j].y);
					}
					gd.closePath();
					gd.stroke();
				}
			},16)
			

		},false);		
	</script>
</head>
<body>
	<canvas id="c1"></canvas>
</body>
</html>